<template>
  <div class="">
    <Header :isGoBack="false">
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>

    <div class="grammer-video study-center natural-spell w1200">
      <div class="header-grammer">
        <span
          >自然拼读<span v-if="checkedBookData.book_id == 2071"
            >快速版</span
          ></span
        >
      </div>
      <div class="study-conatiner flex-space-be">
        <el-container class="intelligent-study-container">
          <el-aside>
            <div class="intelligent-study-left mr20 study-cotainer">
              <div class="study-cotainer-title intelligent-item-header">
                <span class="title">选择内容</span>
              </div>
              <!-- 左侧侧边栏 -->
              <div class="study-unit" id="studyVideoType">
                <div class="scorll-box">
                  <ul class="natural-list natural-list1">
                    <li
                      class="natural-list-item"
                      v-for="item1 in catalogList"
                      :key="item1.id"
                    >
                      <div
                        class="natural-list-item-contain click"
                        @click="item1.isShow = !item1.isShow"
                      >
                        <div
                          class="natural-list-item-title ellipsis"
                          style="font-size: 10px !important;"
                        >
                          {{ item1.content }}
                        </div>
                        <div class="natural-list-item-icon">
                          <i
                            class="el-icon-arrow-down"
                            v-show="!item1.isShow"
                          ></i>
                          <i v-show="item1.isShow" class="el-icon-arrow-up"></i>
                        </div>
                      </div>
                      <el-collapse-transition>
                        <ul
                          class="natural-list natural-list2"
                          v-show="item1.isShow"
                        >
                          <li
                            class="natural-list-item"
                            :class="
                              item2.object_list[0].id == checkedTypeId
                                ? 'natural-list-item-checked'
                                : ''
                            "
                            v-for="item2 in item1.object_list"
                            :key="item2.id"
                          >
                            <!-- <div
                                class="natural-list-item-contain click"
                                @click="item2.isShow = !item2.isShow"
                              > -->
                            <div
                              class="natural-list-item-contain click"
                              @click="checkTypeId(item2.object_list)"
                            >
                              <div
                                class="natural-list-item-title ellipsis"
                                style="font-size: 10px !important;"
                              >
                                {{ item2.content }}
                              </div>
                              <div class="natural-list-item-icon">
                                <!-- <i
                                    v-show="!item2.isShow"
                                    class="el-icon-arrow-down"
                                  ></i>
                                  <i
                                    v-show="item2.isShow"
                                    class="el-icon-arrow-up"
                                  ></i> -->
                              </div>
                            </div>
                            <!-- <el-collapse-transition>
                                <ul
                                  class="natural-list natural-list3"
                                  v-show="item2.isShow"
                                >
                                  <li
                                    class="natural-list-item click"
                                    :class="
                                      item3.id == checkedTypeId
                                        ? 'natural-list-item-checked'
                                        : ''
                                    "
                                    v-for="item3 in item2.object_list"
                                    :key="item3.id"
                                    @click="checkTypeId(item3)"
                                    :id="`phonics-${item3.id}`"
                                  >
                                    <div class="natural-list-item-title">
                                      {{ item3.content }}
                                    </div>
                                  </li>
                                </ul>
                              </el-collapse-transition> -->
                          </li>
                        </ul>
                      </el-collapse-transition>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-aside>
          <el-main>
            <div class="video-type-list">
              <h4 class="type-title">
                <span>{{ checkedTitle }}</span>
                <span
                  @click="goWordBook('first')"
                  style="float: right;cursor: pointer;"
                  >单词本</span
                >
                <!-- v-if="checkedData.source < 3 || $store.getters.isTeacher" -->
                <span
                  @click="
                    goPage('spellTestAfterStudy', {
                      checkedTypeId,
                      checkedTitle,
                      source: checkedData.source,
                    })
                  "
                  style="float: right;cursor: pointer;margin-right:10px"
                  >学后闯关</span
                >
              </h4>
              <div class="natural-spell-container" v-if="checkedData">
                <div class="natural-spell-container-box">
                  <div class="word-study">
                    <!-- 拼读学习 -->
                    <div
                      v-if="checkedBookData.book_id == 2070"
                      class="study-item big-study-item mr30 study-border"
                      @click="
                        goPage('spellStudy', {
                          checkedTypeId,
                          checkedTitle,
                          source: checkedData.source,
                        })
                      "
                      :class="$store.getters.isTeacher ? 'not-click' : 'click'"
                    >
                      <div class="study-item-progress">
                        <div class="challenge challenge-right">
                          <img
                            src="~@/assets/img/naturalSpell/spell-study.png"
                            alt=""
                          />
                        </div>
                      </div>
                      <div class="study-item-name mt10">拼读学习</div>
                    </div>
                    <!-- 见词能读 dictationFast-->
                    <!-- <div
                      class="study-item big-study-item mr30 study-border"
                      @click="
                        goPage('readWord', {
                          checkedTypeId,
                          checkedTitle,
                          source: checkedData.source,
                        })
                      "
                      :class="$store.getters.isTeacher ? 'not-click' : 'click'"
                    > -->
                    <div
                      class="study-item big-study-item mr30 study-border"
                      @click="
                        goPage('readWordFast', {
                          unitId,
                        })
                      "
                      :class="$store.getters.isTeacher ? 'not-click' : 'click'"
                    >
                      <div class="study-item-progress">
                        <div class="challenge challenge-right">
                          <img
                            src="~@/assets/img/naturalSpell/rdicon_heightlight.png"
                            alt=""
                          />
                        </div>
                      </div>
                      <div class="study-item-name mt10">见词能读</div>
                    </div>
                    <!-- 听音能写 -->
                    <div
                      class="study-item big-study-item study-border"
                      :class="$store.getters.isTeacher ? 'not-click' : 'click'"
                      @click="
                        goPage('dictationFast', {
                          unitId,
                        })
                      "
                    >
                      <div class="study-item-progress">
                        <div class="challenge challenge-right">
                          <img
                            src="~@/assets/img/naturalSpell/listen-study.png"
                            alt=""
                          />
                        </div>
                      </div>
                      <div class="study-item-name mt10">听音能写</div>
                    </div>
                  </div>
                  <!-- 听读测验 -->
                  <!-- :disabled="
                          checkedData.source < 2 || $store.getters.isTeacher
                        " -->
                  <div class="go-spell-btn">
                    <el-button
                      class="button button-bg-primary button-large"
                      @click="
                        goPage('spellListenTest', {
                          checkedTypeId,
                          checkedTitle,
                          source: checkedData.source,
                        })
                      "
                    >
                      听读测验
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-main>
          <!-- 智能复习区 -->
          <div
            class="intelligent-review study-item"
            id="step3"
            style="width: 200px;background:#f7f7f7; margin-left: 20px;height: 100%;"
          >
            <div class="study-item-header">
              <span>智能复习区</span>
            </div>
            <div
              class="intelligent-review-container"
              style="background: #ffff;"
            >
              <div class="intelligent-review-once">
                <el-button
                  :disabled="$store.getters.isTeacher"
                  class="button button-bg-second"
                  @click="goReview()"
                >
                  一键智能复习
                </el-button>
              </div>
              <ul v-if="$store.getters.isTeacher">
                <li
                  v-for="item in reviewData"
                  :key="item.category"
                  :class="item.num > 10 ? 'checked-item' : ''"
                >
                  智能{{ categoryObj[item.category] }} ( {{ item.num }} )
                </li>
              </ul>
              <ul v-else>
                <li
                  v-for="item in reviewData"
                  :key="item.category"
                  @click="goReview(item)"
                  class="click"
                  :class="item.num > 10 ? 'checked-item' : ''"
                >
                  智能{{ categoryObj[item.category] }} ( {{ item.num }} )
                </li>
              </ul>
            </div>
            <div class="btn-box">
              <el-button
                class="button button-bg-primary btn"
                @click="goMemoryReview"
              >
                记忆追踪
              </el-button>
            </div>
          </div>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import { getNaturalSpellList, groupUnit } from "@/api/naturalSpell";
import { getReviewNumber } from "@/api/index";
export default {
  data() {
    return {
      istrialClass: false,
      unitId: null,
      reviewData: [],
      checkedBookData: {},
      catalogList: [],
      catalogList_flatten: [],
      checkedTypeId: null,
      checkedData: null,
      categoryObj: {
        0: "听读",
        1: "词听",
        2: "听写",
        3: "默写",
      },
      categoryRoute: {
        0: "readWordFast",
        1: "wordListen",
        2: "dictationFast",
        3: "writeMemory",
      },
    };
  },
  computed: {
    checkedTitle() {
      if (this.checkedData) {
        return `${this.checkedData.content_1} - ${this.checkedData.content_2}`;
      }
      return "-";
    },
  },
  components: {
    Header,
  },
  methods: {
    goReview(data, isForce) {
      if (data) {
        if (data.num > 0) {
          this.$router.push({
            name: this.categoryRoute[data.category],
            query: {
              isReview: true,
              isForce,
            },
          });
        }
      } else {
        let filterData = this.reviewData.filter((item) => {
          return item.num > 0;
        });
        if (filterData.length > 0) {
          this.$router.push({
            name: this.categoryRoute[filterData[0].category],
            query: {
              isReview: true,
            },
          });
        } else {
          this.$alert("暂无可以复习的单词", "提示");
        }
      }
    },
    getReviewNumber() {
      getReviewNumber(this.checkedBookData.book_id).then((res) => {
        if (res.code == 200 && res.data) {
          this.reviewData = res.data.filter((item) => {
            return item.num > 0;
          });
        }
      });
    },
    goWordBook(tab) {
      this.$router.push({
        name: "wordBook",
        query: {
          tab,
        },
      });
    },
    goMemoryReview() {
      this.$router.push({
        name: "memoryReview",
        query: {
          backName: "naturalSpell",
        },
      });
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    checkTypeId(item, isScroll) {
      if (this.istrialClass && item[0].id !== 112) return;
      this.checkedTypeId = item[0].id;
      this.checkedData = item[0];
      localStorage.setItem(
        "spellCheckedData",
        JSON.stringify(this.checkedData)
      );
      console.log(this.checkedData);
      this.catalogList.forEach((item1) => {
        item1.object_list &&
          item1.object_list.forEach((item2) => {
            item2.object_list &&
              item2.object_list.forEach((item3) => {
                if (item3.id == this.checkedTypeId) {
                  this.unitId = item2.unit_id;
                  console.log(this.unitId, "unitId");
                  item1.isShow = true;
                  item2.isShow = true;
                }
              });
          });
      });
      localStorage.setItem("spellCheckeWordlist", JSON.stringify(item));
      this.$nextTick(() => {
        let dom = document.getElementById(`phonics-${this.checkedTypeId}`);
        if (dom && isScroll) {
          dom.scrollIntoView(false);
        }
      });
    },
    checkedDefaultId() {
      if (this.checkedTypeId) {
        let arr = this.catalogList_flatten.filter((item) => {
          return item.id == this.checkedTypeId;
        });
        if (arr.length > 0) {
          const { id_1, id_2 } = arr[0];
          this.catalogList.forEach((item) => {
            if (item.id == id_1) {
              item.object_list.forEach((item1) => {
                if (item1.id == id_2) {
                  this.checkTypeId(item1.object_list, true);
                }
              });
            }
          });
          return;
        }
      }
      if (this.catalogList[0].object_list[0]) {
        this.checkTypeId(this.catalogList[0].object_list[0].object_list, true);
        return;
      }
    },

    getNaturalSpellList() {
      let type;
      if (this.checkedBookData.book_id == 2070) {
        type = 1;
      } else {
        // type=2
        groupUnit(this.checkedBookData.book_id).then((res) => {
          if (res.code == 200) {
            console.log(res, "res");
            // this.setIsSpellData(res.data);
            // this.catalogList = res.data;
            // this.catalogList_flatten = this.flatten(res.data);
            // localStorage.setItem(
            //   "catalogList_flatten",
            //   JSON.stringify(this.catalogList_flatten)
            // );
            // this.checkedDefaultId();
          }
        });
      }
      getNaturalSpellList(type).then((res) => {
        if (res.code == 200) {
          this.setIsSpellData(res.data);
          this.catalogList = res.data;
          this.catalogList_flatten = this.flatten(res.data);
          localStorage.setItem(
            "catalogList_flatten",
            JSON.stringify(this.catalogList_flatten)
          );
          this.checkedDefaultId();
        }
      });
    },
    setIsSpellData(list) {
      list.forEach((item1) => {
        item1.isShow = false;
        item1.object_list &&
          item1.object_list.forEach((item2) => {
            item2.isShow = false;
            item2.object_list &&
              item2.object_list.forEach((item3) => {
                item3.isShow = false;
                item3.id_1 = item1.id;
                item3.id_2 = item2.id;
                item3.content_1 = item1.content;
                item3.content_2 = item2.content;
              });
          });
      });
    },
    flatten(arr) {
      return arr.reduce((pre, item) => {
        return pre.concat(
          Array.isArray(item.object_list)
            ? this.flatten(item.object_list)
            : item
        );
      }, []);
    },
    goPage(name, query) {
      if (this.$store.getters.isTeacher) {
        return;
      }
      this.$goRouter(name, query);
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getReviewNumber();
    this.getNaturalSpellList();
    this.checkedTypeId = this.$route.query.checkedTypeId
      ? this.$route.query.checkedTypeId
      : null;
  },
  mounted() {
    if (
      (new Date(this.checkedBookData.end_time).getTime() -
        new Date(this.checkedBookData.start_time).getTime()) /
        1000 /
        60 /
        60 /
        24 <
      28
    ) {
      this.istrialClass = true;
    }
    // document
    //   .getElementById("app")
    //   .addEventListener("scroll", this.scrollBehavior);
  },
  beforeDestroy() {
    // document
    //   .getElementById("app")
    //   .removeEventListener("scroll", this.scrollBehavior);
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
/deep/ .el-aside{
   width: 1.25rem !important;
}
.intelligent-study-left {
  width: 1.0416666rem !important;
  height: 100%;
}
.ellipsis {
  display: inline-block;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.study-item {
  width: 200px !important;

  .study-item-name {
    font-size: 0.1354166rem !important;
  }

  img {
    width: 100px;
    height: 100px;
  }
}

.btn {
  width: 160px !important;
}

.natural-list-item-checked {
  background: #e7f1ff;
}
</style>
